<!-- 报表表格组件 -->

<template>
    <div class="tableContainer">
        <el-table :data="tableData" size="small" height="100%" style="width: 100%" ref="table"
            :span-method="objectSpanMethod" :show-summary="showSummary" :summary-method="getSummaries" v-loading="loading"
            element-loading-text="数据加载中..." element-loading-spinner="el-icon-loading" :empty-text="loading ? '.' : '暂无数据'"
            class="eq-table" :border="true" stripe>
            <el-table-column :resizable="false" type="index" width="60" label="序号" v-if="tableColumnData.length && showIndex" :index="(index) => { return index + 1 + (pageInfo.currentPage - 1) * pageInfo.pageSize; }" :fixed="orderFixed">
            </el-table-column>
            <slot name="link"></slot>
            <el-table-column :resizable="false" v-for="data in tableColumnData" :label="data.label" :prop="data.prop"
                :key="data.prop" :align="data.children ? 'center' : ''" :width="getTableColumnWidth(data.prop)" :fixed="data.freeze" :show-overflow-tooltip="data.showTip ?? false">
                <template v-if="data.children">
                    <el-table-column :resizable="false" v-for="item in data.children" :label="item.label" :key="item.prop"
                        :prop="item.prop" :width="getTableColumnWidth(item.prop)">
                        <template #default="scope">
                            {{
                                scope.row[item.prop]
                                ? scope.row[item.prop]
                                : scope.row[item.prop] === 0
                                    ? scope.row[item.prop]
                                    : '--'
                            }}
                        </template>
                    </el-table-column>
                </template>
                <template v-if="!data.children" #default="scope">
                    {{
                        scope.row[data.prop]
                        ? scope.row[data.prop]
                        : scope.row[data.prop] === 0
                            ? scope.row[data.prop]
                            : '--'
                    }}
                </template>
            </el-table-column>
            <slot></slot>
        </el-table>
    </div>
</template>

<script setup>

const props = defineProps({
    loading: {
        type: Boolean,
        default: false
    },
    orderFixed: {
        type: Boolean,
        default: false
    },
    showSummary: {
        type: Boolean,
        default: false
    },
    showIndex: {
        type: Boolean,
        default: true
    },
    isMergeCell: {
        type: Boolean,
        default: false
    },
    columnIndexs: {
        type: Array,
        default: [1,2,3,4,5,6]
    },
    summaryData: {
        type: Object,
        required: true
    },
    tableColumnData: {
        type: Array,
        default: () => [],
    },
    tableData: {
        type: Array,
        default: () => [],
    },
    pageInfo: {
        type: Object,
        required: true
    },
    tableColumnWidthData: {
        type: Object,
        required: true
    }
});

const getTableColumnWidth = (key) => {
    if (Object.keys(props.tableColumnWidthData).includes(key)) {
        return props.tableColumnWidthData[key];
    }
    return 'auto';
};

const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
    const { rowspan, colspan, vehicleModel } = row;
    
    if(!props.isMergeCell){
        return {
            rowspan: 1,
            colspan: 1
        }
    }
    
    // if (columnIndex === 1 || columnIndex === 2 || columnIndex === 3 || columnIndex === 4 || columnIndex === 5 || columnIndex === 6) {
    if(props.columnIndexs.includes(columnIndex)){
        if (vehicleModel) {
            return {
                rowspan,
                colspan
            }
        } else {
            return {
                rowspan: 1,
                colspan: 1
            }
        }
    }
};

// 获取汇总数据
const getSummaries = (param) => {
    const { columns, data } = param;
    const sums = [];

    if (!Object.keys(props.summaryData).length) return sums;

    columns.forEach((column, index) => {
        if (index === 0) {
            sums[index] = "汇总";
            return;
        }

        if (props.summaryData[column.property]) {
            sums[index] =
                props.summaryData[column.property] === "汇总"
                    ? "--"
                    : props.summaryData[column.property];
        } else {
            sums[index] = "--";
        }
    });
    return sums;
};

</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
